<template>
  <div id="home">
    <div class="banner">
      <div class="banner_img">
        <img src="@/assets/banner/banner1.png" alt="" />
      </div>
      <div class="banner_menu">
        <div v-for="(item, index) in menu" :key="index">
          <img class="icon" :src="item.icon" alt="" />
          <div class="text">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="menu"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menu: [
        {
          name: "门店活动",
          icon: require("@/assets/banner/icon1.png"),
          path: "",
        },
        {
          name: "会员活动",
          icon: require("@/assets/banner/icon2.png"),
          path: "",
        },
        {
          name: "订货清单",
          icon: require("@/assets/banner/icon3.png"),
          path: "",
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
#home {
  padding: 5vw;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.banner {
  width: 100%;
  height: 45vw;
  position: relative;
  .banner_img {
    width: 100%;
    height: 100%;
    border-radius: 4vw;
    background: #eee;
    overflow: hidden;
    img{
        width: 100%;
        height: 100%;
    }
  }
  .banner_menu {
    width: 90%;
    height: 16vw;
    margin: 0 5%;
    border-radius: 8vw;
    background: #fff;
    position: absolute;
    bottom: -8vw;
    left: 0;
    box-shadow: 0px 5px 30px #ececec;
    display: flex;
    justify-content: space-around;
    text-align: center;
    padding:2vw 5vw;
    box-sizing: border-box;
    font-size: 2vw;
    div {
      width: 23%;
      div {
        width: 100%;
      }
      .icon {
        width: 8vw;
        height: 8vw;
      }
    }
  }
}
</style>
